<!-- 提示 -->
<template>
  <div class="template-ui-tips">
    <template-head title="消息提示"></template-head>
    <div class="common-presentation">
      <h2 class="common-presentation-subtitle">template-tips 消息提示</h2>
      <p class="common-presentation-describe">包括顶部提示，居中提示，底部提示。可切换提示框背景颜色。</p>
    </div>
    <div class="tips_text_position">
      <div
        class="tips_tab_list"
        :class="{active : index == textIndex}"
        @click="changText(index)"
        v-for="(item,index) in textList"
        :key="index"
      >
        {{item.name}}
      </div>
    </div>
    <div class="tips_btn_list">
      <button
        class="tips_btn_grey"
        v-for="(item,index) in btnTextList"
        @click="changeTips(item,index)"
        :key="index"
      >
        {{item}}
      </button>
    </div>
    <div class="tips_btn_list">
      <button
        class="tips_btn_grey"
        v-for="(item,index) in btnTextList"
        @click="changeTips(item,index)"
        :key="index"
      >
        {{item}}
      </button>
    </div>
    <template-tips
      ref="tips"
      :position="textList[textIndex].code"
      :backgroundColor="tipsBgColor"
    ></template-tips>
  </div>
</template>

<script>
export default {
  data () {
    return {
      textList: [
        {
          name: '顶部提示',
          code: 'top'
        },
        {
          name: '居中提示',
          code: 'center'
        },
        {
          name: '底部提示',
          code: 'bottom'
        },
      ],
      textIndex: 0,
      textContent: '一般提示',
      btnTextList: [
        '一般提示',
        '成功提示',
        '警告提示',
        '错误提示',
        '长文字消息提示',
        '自定义时间消息提示',
      ],
      tipsBgColor: null
    }
  },
  components: {
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  methods: {
    changText (index) {
      this.textIndex = index
    },
    changeTips (text, index) {
      let options = {
        msg: text
      }
      this.tipsBgColor = 'rgba(0,0,0,.55)'
      switch (index) {
        case 1:
          this.tipsBgColor = 'rgba(98,184,1,1)'
          break
        case 2:
          this.tipsBgColor = 'rgba(243,155,5,1)'
          break
        case 3:
          this.tipsBgColor = 'rgba(233,3,30,1)'
          break
        case 4:
          options = {
            msg: '长文字消息提示，看不完消息？可以自定义设置显示时间，建议提示信息不要过长'
          }
          break;
        case 5:
          options = {
            msg: '4S后关闭提示框',
            duration: 4000
          }
          break;
      }

      this.$refs.tips.showTips(options)
    }
  }
}
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.template-ui-tips {
  .tips_text_position {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #4aa0ff;
    display: flex;
    justify-content: space-around;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 22px;
    .tips_tab_list {
      color: #4aa0ff;
      line-height: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      flex: 1;
      text-align: center;
      &.active {
        background-color: #4aa0ff;
        color: #ffffff;
      }
    }
  }
  .tips_btn_list {
    padding: 20px;
    .tips_btn_grey {
      border: none;
      background: none;
      outline: none;
      width: 100%;
      height: 45px;
      border-radius: 20px;
      font-size: 16px;
      color: #989898;
      background-color: #f7f8fa;
      margin-bottom: 20px;

      &::after {
        border: none;
      }
    }
  }
}
</style>